<template>
  <div class="template-library-content">
    <!--start tabs选项 -->
    <ul class="tabs-card-type">
      <li :class="{'active': tabIndex == item.type}" v-for="(item,index) in cardTab" :key="index" @click="onTabsCard(item.type)">{{item.name}}</li>
    </ul>
    <!--end tabs选项 -->

    <!--start 组件库列表 -->
    <div class="tabs-card-item" >
      <template-card-item 
        v-for="(item, idx) in cardSysList"
        :key="item.id"
        class="dynamic-card-list__item"
        :card-item.sync="cardSysList[idx]"
        :card-type="cardType"
        @update="updateTemplate"
        @operate="emitTrackerEvent"
      ></template-card-item>
    </div>
    <!--end  组件库列表 -->
  </div>
</template>
<script>
// components
import TemplateCardItem from '../../../components/TemplateCardItem';
import _ from 'lodash';
import { isBasicEditionHideSystemCard } from '@shb-lib/version';
export default {
  name: 'template-library',
  props: {
    cardGroup:{
      type: Object,
      default: () => ({})
    },
  },
  computed: {
    cardSysList() {
      if(this.tabIndex == 0){
        let allCard = [];
        
        for (let k in this.cardGroup){
          allCard.push(...this.cardGroup[k])
        }
        return allCard
      }
      return this.cardGroup[this.tabIndex]
    },
    // 基础版功能是否显示
    isBasicEditionHideSystemCard() {
      return isBasicEditionHideSystemCard() 
    },
    /** 所有模版 */
    allCard() {
      return Object.values(this.cardGroup).flat();
    },
    /** 系统模版 */
    systemCardList() {
      return this.allCard.filter(c => c.type == 7)
    },
    cardTab() {
      let tabs = [{
        type: 0,
        name: this.$t('event.setting.constant.additional_type_tabs.name1')
      }, {
        type: 7,
        name: this.$t('task.setting.taskAdditionalSetting.systemComponent')
      }, {
        type: 1,
        name: this.$t('event.setting.constant.additional_type_tabs.name2')
      }, {
        type: 2,
        name: this.$t('event.setting.constant.additional_type_tabs.name3')
      }, {
        type: 3,
        name: this.$t('event.setting.constant.additional_type_tabs.name4')
      }, {
        type: 6,
        name: this.$t('event.setting.constant.additional_type_tabs.name7')
      }, {
        type: 4,
        name: this.$t('event.setting.constant.additional_type_tabs.name5')
      }, {
        type: 5,
        name: this.$t('event.setting.constant.additional_type_tabs.name6')
      }]

      // 基础版、无系统附加组件数据时过滤系统组件tab标签
      if (this.isBasicEditionHideSystemCard || this.systemCardList.length == 0) {
        // TODO 国际化待办
        return tabs.filter(item => item?.name !== '系统组件' && item?.name !== this.$t('task.setting.taskAdditionalSetting.systemComponent'))
      }  
      
      return tabs;
    }
  },
  data() {
    return {
      fields:[],
      tabIndex:0,
      cardType:'addCardSet'
    };
  },
  methods: {
    onTabsCard(type){
      this.tabIndex = type;
    },
    updateTemplate(){
      this.$emit('update');
    },
    emitTrackerEvent(event, card) {
      this.$track.clickStat(this.$track.formatParams(event, card.cardName, `ADD_COMP_FROM_TEMPLATE_${card.type === 7 ? 'SYSTEM' : 'OTHER'}`));
    }
  },
  components: {
    [TemplateCardItem.name]: TemplateCardItem,
  },
};
</script>
<style lang="scss" scoped>
.template-library-content {
  width: 100%;
  .tabs-card-type {
    display: flex;
    justify-content: flex-start;
    padding-inline-start: 0;
    li {
      width: 171px;
      white-space: nowrap;
      height: 50px;
      line-height: 50px;
      background: #ffffff;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
      border-radius: 4px;
      list-style: none;
      font-size: 16px;
      text-align: center;
      margin-right: 12px;
      cursor: pointer;
    }
    .active{
        background: linear-gradient(135deg, $color-primary-light-3 0%, $color-primary-light-6 100%);
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.08);
        color: #fff;
    }
  }
  .tabs-card-item{
    display: flex;
    flex-flow: wrap;
      @include dynamic-card-list(2);
  }
}
</style>